<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../static/css/index.css" />
    <script src="../static/js/echarts.js"></script>
     <script src="../static/js/echarts-wordcloud.js"></script>
    <script src="../static/js/echarts-wordcloud.min.js"></script>
</head>

<body>
    <header>
        <div class="nav" style="position: absolute;right:25%;top: .1vw;
        width: 50%;
        height: 5vw;
        background: url(../static/image/111.png) no-repeat;
        background-size: 100%;
        text-align: center;
        line-height: 5vw;
        color: #0efcff;
        font-size: 1.6vw;
        letter-spacing: .6vw;">国家生育率大数据可视化分析系统</div>
        <div class="showTime">当前时间：2023年6月<span></span></div>
    </header>
    <section class="mainbox">
        <div class="column">
            <div class="panel bar"style="width: 340px;height:200px;">
                <h2 style=" position: absolute;right:25%;top: .1vw;width: 50%;
                height: 3vw;background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;line-height: 2.5vw;
                color: #0efcff;font-size: 1vw;letter-spacing: .1vw;">
                    柱状图-近年生育率 
                </h2>
				<div id="main" style="width: 300px;height:200px;"></div>
                <script type="text/javascript">
				var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                    option = {
                    tooltip:{},
                    xAxis: {
                        type: 'category',
                        data: ['2017', '2018', '2019', '2020', '2021','(年)']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                        data: ['1.77', '1.81', '1.55', '1.50','1.28','1.16'],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }}] };
                    myChart.setOption(option);
                    
                </script>
                
            </div>
            <div class="panel line"style="width: 340px;height:200px;">
                <h2 style=" position: absolute;right:22.5%;top: .1vw;width: 55%;
                height: 3vw;background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;line-height: 3vw;
                color: #0efcff;font-size: 1vw;letter-spacing: .1vw;">
                折线图-近年生育率变化</h2>
				<div id="mainn" style="width: 320px;height:220px;"></div>
                <script type="text/javascript">
				var chartDom = document.getElementById('mainn');
                var myChart = echarts.init(chartDom);
                var option;
                    option = {
                    tooltip:{},
                    xAxis: {
                        type: 'category',
                        data: ['2017', '2018', '2019', '2020', '2021','(年)']
                        },
                    yAxis: {
                        type: 'value'
                    },
                    normal: {//是图形在默认状态下的样式
                                            label: {
                                                show: true,//是否显示标签
                                                textStyle: {
                                                    color: "black"
                                                }
                                            }
                                        },
                    series: [
                        {
                        data: [{value: 0.04, name: '2017'},
                                {value: 0.26, name: '2018'},
                                {value: 0.05, name: '2019'},
                                {value: 0.22, name: '2020'},
                                {value: 0.12, name: '2021'}],
                        
                        type: 'line',
                        symbol: 'triangle',
                        symbolSize: 20,
                        lineStyle: {
                            color: '#5470C6',
                            width: 4,
                            type: 'dashed'
                        },
                        itemStyle: {
                            borderWidth: 3,
                            borderColor: '#EE6666',
                            color: 'yellow'
                        }
                        
                        }
                    ]
                    };
                    myChart.setOption(option);
                </script>
                <div class="panel-footer"></div> 
            </div>
            <div class="panel pie" style="width: 340px;height:300px;">
                <h2 style=" position: absolute;right:20%;top: .1vw;
                width: 60%;height: 3vw;
                background: url(../static/image/111.png) no-repeat;
                background-size: 100%;text-align: center;
                line-height: 3vw;color: #0efcff;font-size: 1vw;
                letter-spacing: .1vw;">饼形图-出生人口孩次构成</h2>
                <div class="chart"></div>
                <div class="panel-footer" ></div>
				<div id="mainb" style="width: 320px;height:220px;"></div>
				<script type="text/javascript">
				// 基于准备好的dom，初始化echarts实例
				    var myChart = echarts.init(document.getElementById('mainb'));
                // 指定图表的配置项和数据
				    var option = {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['一孩', '二孩', '三孩', '多孩'],
                        textStyle: {
                  color: '#ffffff'
              }
                    },
                    series: [
                        {
                            name: '所出生人口孩次构成',
                            type: 'pie',
                            data: [
                                {value: 509, name: '一孩'},
                                {value: 690, name: '二孩'},
                                {value: 300, name: '三孩'},
                                {value: 100, name: '多孩'}
                            ],
                        }
                    ]
                };
                    var option = {
                    title: {
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['一孩', '二孩', '三孩', '多孩'],
                        textStyle: {
                  color: '#ffffff'
              }
                        
                    },
                    
                    series: [
                        {
                            name: '出生人口孩次构成',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            data: [
                                {value: 300, name: '一孩'},
                                {value: 509, name: '二孩'},
                                {value: 200, name: '三孩'},
                                {value: 50, name: '多孩'}
                            ],
                        }
                    ]
                };
                 // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    </script>
                </div>
            </div>
        <div class="column">
            <div class="no" style="margin-top: 10%;">
                <div class="no-hd">
                    <ul>
                        <li >6.77‰</li>
                        <li>2.1</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li style="color: #ffffff;
                        font-size: 1vw;">当前生育率</li>
                        <li style="color: #ffffff;
                        font-size: 1vw;">最佳生育数</li>
                    </ul>
					</div>
                </div>

					<div class="map">
                        <div class="chart"></div>
                       
                    <div id="china" style="height: 550px;width:750px; margin-top: 10%;"></div>
                    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
                    <script>
                        // 初始化echarts实例
                        var myEcharts = echarts.init(document.getElementById("china"));
                        var option = {
                            title: {  //标题样式
                                text: '中国各省份生育率（‱）',
                                
                                x: "center",
                                textStyle: {
                                    fontSize: 18,
                                    color: "#0efcff"
                                },
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    console.log(params)
                                    if (params.name) {
                                        return params.name + ' : ' + (isNaN(params.value) ? 0 : parseInt(params.value));
                                    }
                                }
                            },
                            visualMap: {//视觉映射组件
                                top: 'center',
                                left: 'left',
                                min: -10,
                                max: 100,
                                //text: ['High', 'Low'],
                                realtime: false,  //拖拽时，是否实时更新
                                calculable: true,  //是否显示拖拽用的手柄
                                inRange: {
                                    color: ['#00caca','#4a4aff','#ffdc35', '#ff2d2d']
                                }
                            },
                            series: [
                                {
                                    name: '模拟数据',
                                    type: 'map',
                                    mapType: 'china',
                                    roam: false,//是否开启鼠标缩放和平移漫游
                                    itemStyle: {//地图区域的多边形 图形样式
                                        normal: {//是图形在默认状态下的样式
                                            label: {
                                                show: true,//是否显示标签
                                                textStyle: {
                                                    color: "black"
                                                }
                                            }
                                        },
                                        zoom: 1.5,  //地图缩放比例,默认为1
                                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                                            label: {show: true}
                                        }
                                    },
                                    top: "3%",//组件距离容器的距离
                                    data: [
                                        {name: '北京', value: 56.7},
                                        {name: '天津', value: 6},
                                        {name: '上海', value: 43.5},
                                        {name: '重庆', value: 59.8},
                                        {name: '河北', value: 60.9},
                                        {name: '河南', value: 60},
                                        {name: '云南', value: 81.4},
                                        {name: '辽宁', value: 40.8},
                                        {name: '黑龙江', value: 3},
                                        {name: '湖南', value: 7},
                                        {name: '安徽', value: 7},
                                        {name: '山东', value: 6},
                                        {name: '新疆', value: 65.3},
                                        {name: '江苏', value: 52.3},
                                        {name: '浙江', value: 62.8},
                                        {name: '江西', value: 71.9},
                                        {name: '湖北', value: 60.8},
                                        {name: '广西', value: 85.1},
                                        {name: '甘肃', value: 84.7},
                                        {name: '山西', value: 67.5},
                                        {name: '内蒙古', value: 55.8},
                                        {name: '陕西', value: 81.0},
                                        {name: '吉林', value: 43.8},
                                        {name: '福建', value: 70.7},
                                        {name: '贵州', value: 90.3},
                                        {name: '广东', value: 80.3},
                                        {name: '青海', value: 10.6},
                                        {name: '西藏', value: 50},
                                        {name: '四川', value: 63.9},
                                        {name: '宁夏', value: 70.9},
                                        {name: '海南', value: 80.6},
                                        {name: '台湾', value: 4.1},
                                        {name: '香港', value: 4.9},
                                        {name: '澳门', value: 3.4}
                                    ]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myEcharts.setOption(option);
                    </script>
                        </div>
                       </div>
                    
    
        
           <div class="column">
            <div class="panel bar1" style="width: 340px;height:350px;z-index: 0;position: absolute;right:0%">
                <h2 style=" position: absolute;right:22.5%;top: .1vw;width: 55%;height: 3vw;
                background: url(../static/image/111.png) no-repeat;background-size: 100%;
                text-align: center;line-height: 2.5vw;color: #0efcff;font-size: 1vw;
                letter-spacing: .1vw;">雷达图-影响生育率因素</h2>
                <div class="chart"></div>
                <div class="panel-footer">
                    <div id="maina" style="width: 360px;height:300px;"></div>
                <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('maina'));
       // 指定图表的配置项和数据
        var option = {
      tooltip: {},
      legend: {
          data: ['男性', '女性'],
          left: 'left',
          orient: 'vertical',
          textStyle: {
                  color: '#ffffff'
              }
      },
      radar: {
          name: {
              textStyle: {
                  color: '#ffffff',
                  backgroundColor: '#0066cc',
                  borderRadius: 3,
                  padding: [3, 5]
              }
          },
          indicator: [
              { name: '文化水平', max: 1000},
              { name: '身体因素', max: 1000},
              { name: '思想观念', max: 1000},
              { name: '收入水平', max: 1000},
              { name: '政策', max: 1000},
              

          ]
      },
      series: [{
          type: 'radar',
          data: [
              {
                  value: [210, 500, 490, 688,100],
                  name: '男性'
              },
              {
                  value: [430, 600, 380, 340,350],
                  name: '女性'
              }
          ],
          itemStyle: {
        normal: {
          color: function (colors) {
            var colorList = ['#ee6666', 'yellow'];
            return colorList[colors.dataIndex];
          }
        }}
          
      }]
  };
  
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      </script>
              </div>
                </div>
                
				
            
            <div class="panel line1"  style="width: 340px;height:340px;z-index: 0;position: absolute;right:0%;bottom: 0%;">
                <h2 style=" position: absolute;right:25%;top: .1vw;
                width: 50%;
                height: 3vw;
                background: url(../static/image/111.png) no-repeat;
                background-size: 100%;
                text-align: center;
                line-height: 2.5vw;
                color: #0efcff;
                font-size: 1vw;
                letter-spacing: .1vw;">词云图-生育率关键词</h2>
                
                
                <div id="mainc" style="width: 360px;height: 360px;"></div>

    <script >
        var mycharts = echarts.init(document.getElementById("mainc"));
        //用来存储数据
        var jsonlist = [];
        jsonlist.push(
        
        {
            "name": "住房成本过高",
            "value": 883
        },
        {
            "name": "教育成本过高",
            "value": 1236
        },
        {
            "name": "考虑个人发展",
            "value": 1008
        },
        {
            "name": "传统观念",
            "value": 649
        },
        {
            "name": "政策改变",
            "value": 538
        },
        {
            "name": "年龄压力",
            "value": 637
        },
        {
            "name": "身边的人的压力",
            "value": 324
        },
        {
            "name": "职场",
            "value": 724
        },
        {
            "name": "焦虑",
            "value": 543
        },
        {
            "name": "痛",
            "value": 553
        },
        {
            "name": "养老",
            "value": 541
        },
        {
            "name": "收入水平不稳定",
            "value": 874
        },
        {
            "name": "月光族",
            "value": 363
        },
        {
            "name": "感情不稳定",
            "value": 662
        },
        {
            "name": "责任",
            "value": 850
        },
        {
            "name": "舒适圈",
            "value": 321
        },
        {
            "name": "学业研究",
            "value": 320
        },
        {
            "name": "职场歧视",
            "value": 416
        },
        {
            "name": "交通焦虑",
            "value": 310
        },
        {
            "name": "精力",
            "value": 789
        },
        {
            "name": "不和谐",
            "value": 316
        },
        {
            "name": "医疗成本",
            "value": 303
        },
        {
            "name": "一地鸡毛",
            "value": 396
        },
        {
            "name": "婚姻危机",
            "value": 393
        },
        {
            "name": "身体健康",
            "value": 347
        },
        {
            "name": "幸福感",
            "value": 632
        },
        {
            "name": "抑郁症",
            "value": 490
        }
    );
    // 人像的base64编码
        image1= ""
    
        var maskResource = new Image()
        maskResource.src=image1;
        
        var option ={
            //设置标题，居中显示
         
            //数据能够点击
            tooltip:{

            },

            series:[
                {
                    maskImage:maskResource,
                    //词的类型
                    type: 'wordCloud',
                    //设置字符大小范围
                    sizeRange:[6,78],
                    rotationRange:[-45,90],
                    textStyle: {
                        normal:{
                            //生成随机的字体颜色
                            color:function () {
                                return 'rgb(' + [
                                    Math.round(Math.random() * 150),
                                    Math.round(Math.random() * 30),
                                    Math.round(Math.random() * 60)
                                ].join(',')+')';

                            }
                        }

                    },
                    //不要忘记调用数据
                       data:jsonlist

                 }
            ]

        };
        //加载图像，将数据放在图像中
        maskResource.onload = function(){
            mycharts.setOption(option)
            };
    </script>
            </div>
           
        </div>
    </section>


    <script>
        (function(fn) {
            fn();
            setInterval(fn, 1000);
        })(function() {
            var dt = new Date();
            document.querySelector(".showTime span").innerHTML =
                dt.getDate() + "日-" +
                dt.getHours() + "时" +
                dt.getMinutes() + "分" +
                dt.getSeconds() + "秒";
        });
    </script>
</body>

</html>



